<template>
  <scroller height="86vh">
    <div v-if="isPoem" class="nav-box">
      <div class="nav-title">
        <span class="title-text">
          <ri i="user"></ri>
          诗人
        </span>
        <span class="nav-toolbar">
        </span>
      </div>
      <div class="nav-body">
        <hot-authors tags="poets"></hot-authors>
      </div>
    </div>
    <nav-box v-for="(c, i) in cats" :key="i" :title="getTagName(c)" :tags="getTags(c)">
    </nav-box>
  </scroller>
</template>

<script>
import Scroller from "../tools/Scroller.vue";
import HotAuthors from "../poems/HotAuthors.vue";
// import NavTags from "../poems/NavTags.vue";
import NavBox from "./NavBox.vue";
import { MatKind, TagCatNames } from "@js/constants.js";


export default {
  components: {
    Scroller,
    HotAuthors,
    NavBox,
    // NavTags,
  },
  props: ["kind", "cats"],
  data() {
    return {
      tags: [],
      bili: {},
    };
  },
  computed: {
    isPoem() {
      return this.kind == MatKind.Poem;
    }
  },
  created() {
    this.fetchTags();
  },
  methods: {
    fetchTags() { // 获取标签集合
      this.$axios.get("/api/v1/tags/list?kind=" + this.kind)
        .then((res) => {
          this.tags = res.data;
        });
    },
    getTagName(cat) {
      if (TagCatNames.has(cat)) {
        return TagCatNames.get(cat);
      } else {
        return "未知标签类别：" + cat;
      }
    },
    getTags(cat) {
      return this.tags.filter(c => c.cat == cat);
    }
  },
};
</script>

<style lang="stylus">
.nav-box
  margin-bottom 1vh
  text-align left

  .nav-title
    border-bottom 1px solid #eee
    padding 0.6vh 0

    .title-text
      font-weight bold

      .icon-button
        color #888

    .nav-toolbar
      float right

      svg
        margin-left 5px
        color #999
        cursor pointer

        &:hover
          color #409EFF

  .nav-body
    padding 10px
    font-size 0.9em

    a
      color #666
      cursor pointer
      text-decoration none
      margin-right 10px

      &:hover
        color #409EFF

    .tag-wrap
      margin-right 0.4vw
      margin-bottom 0.6vh
</style>